<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定引入文件 -->
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <link rel="stylesheet" href="./lib/bootstrap.css.map">
    <script src="./lib/jquery.mini.js"></script>
    <!-- <script src="./lib/bootstrap.min.css"></script> -->
    <style>
        .head {
            text-align: center;
        }
    </style>

</head>

<body style="padding: 15px;">
    <!-- 添加图书的面板 -->

    <div class="panel panel-primary">
        <div class="panel-heading head">
            <h3 class="panel-title">图书管理系统</h3>
        </div>
        <div class="panel-body form-inline">

            <!-- <div class="input-group-addon">书名</div> -->

            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="ipBookname" placeholder="请输入书名">
            </div>

            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="ipAuthor" placeholder="请输入作者">
            </div>

            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="ipPublisher" placeholder="请输入出版社">
            </div>

            <button id="btnAdd" class="btn btn-primary">添加</button>

            <div class="input-group">
                <div class="input-group-addon">查询书籍</div>
                <input type="text" class="form-control" id="ipSelect" placeholder="请输入书名">
            </div>
            <button id="btnSelect" class="btn btn-primary">搜索</button>
            <div class="input-group">
                <div class="input-group-addon" id="allBooks"></div>
            </div>

        </div>
    </div>


    <!-- 添加图书的表格 -->

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
            <!-- <td><a href="javascript:;" class="del" data-id="' + item.id + '">删除</a></td> -->
        </tbody>
    </table>

    <script>
        $(function() {
            //获取图书列表的数据

            function getBookList() {
                $.get('http://127.0.0.1:3000/api/getBook', function(res) {
                    // console.log(res);
                    if (res.status !== 200) {
                        return alert('获取数据失败');
                    } else {
                        var rows = [];
                        $.each(res.data, function(i, item) {
                            rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + item.id + '">删除</a></td></tr>')
                                // console.log(item.id);
                        })
                        $('#tb').empty().append(rows.join(''));
                    }
                })
            }
            getBookList();

            //查询书的数量
            function getAllBooks() {
                $.get('http://127.0.0.1:3000/api/selectAllBooks', function(res) {
                    if (res.status != 200) {
                        return alert('获取书籍数目失败');
                    } else {
                        // var rows = [];
                        // $.each(res.data, function(i, item) {
                        //     $.each(res.data, function(i, item) {
                        //         rows.push('书籍数目：' + item.l)
                        //     })
                        // })
                        // $('#allBooks').empty().append(rows.join(''));
                        console.log(res.data);
                        $('#allBooks').html('书籍数目' + res.data[0].l);
                    }
                })
            }
            getAllBooks();


            //a链接是后期操作进去的，刚来是没有的,这里删除图书
            $("#tb").on('click', '.del', function() {
                var id = $(this).attr('data-id');
                var ans = window.confirm('是否删除该图书');
                console.log(ans);
                if (ans == true) {
                    $.post('http://127.0.0.1:3000/api/delBook', {
                        id: id
                    }, function(res) {
                        if (res.status != 200) {
                            console.log('删除图书失败');
                            console.log(res.status);
                        } else {
                            getAllBooks();
                            getBookList();
                        }
                    })
                }
            })


            $("#btnSelect").on('click', function() {
                var bookname = $("#ipSelect").val();
                console.log(bookname);
                $.get('http://127.0.0.1:3000/api/selectBook', {
                    bookname: bookname
                }, function(res) {
                    console.log(res.status);
                    // console.log(res.data);
                    if (res.status != 200) {
                        return alert('查询图书失败');
                    } else {
                        var rows = [];
                        $.each(res.data, function(i, item) {
                            rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + item.id + '">删除</a></td></tr>')
                        })
                        $('#tb').empty().append(rows.join(''));
                        $("#ipSelect").val('')



                    }
                })

            })

            $("#btnAdd").on('click', function() {
                var bookname = $("#ipBookname").val();
                var author = $("#ipAuthor").val();
                var publisher = $("#ipPublisher").val();

                if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
                    return alert('请输入完整的图书信息');
                }

                $.post('http://127.0.0.1:3000/api/addBook', {
                    bookname: bookname,
                    author: author,
                    publisher: publisher
                }, function(res) {
                    if (res.status == 404) {
                        return alert('添加图书失败');
                    } else {
                        getAllBooks();
                        getBookList();
                        // return alert('添加图书成功');
                        $("#ipBookname").val('');
                        $("#ipAuthor").val('');
                        $("#ipPublisher").val('');
                    }

                })
            })
        })
    </script>

</body>

</html>